<template>
	<div class="front_index_container">
		<div class="front_banner_wrapper">
			<a-input-group>
				<a-input size="large" v-model="searchValue" placeholder="请输入服务或应用" allow-clear>
					<template #prefix>
						<icon-search :size="24" :strokeWidth="2" />
					</template>
				</a-input>
				<a-button type="primary" size="large" @click="handleSearch">搜索</a-button>
			</a-input-group>
			<div class="wrapper">
				<a-row :gutter="16">
					<a-col :span="15">
						<a-carousel :auto-play="true" indicator-type="dot" show-arrow="hover">
							<a-carousel-item v-for="(image, index) in images" :key="index">
								<img :src="image" />
							</a-carousel-item>
						</a-carousel>
					</a-col>
					<a-col :span="9"><user-info /></a-col>
				</a-row>
			</div>
		</div>
		<div class="wrapper">
			<a-row class="front_column_container" :gutter="16">
				<a-col :span="15">
					<front-common class="front_schedule" title="我的日程">
						<template #button>
							<a-button type="text" @click="handleAddedSchedule">新增日程</a-button>
						</template>
						<front-schedule @update="handleUpdateSchedule"></front-schedule>
					</front-common>
				</a-col>
				<a-col :span="9">
					<front-common class="front_backlog_wrapper" title="我的待办">
						<template #button>
							<a-button type="text" @click="handleMoreAgenda">更多</a-button>
						</template>
						<div class="item" v-for="(item, index) in backlogDatas" :key="index">
							<icon-xigua-color />
							<a href="#">{{ item.title }}</a>
							<a-tag :color="!item.isUrgency ? 'blue' : 'red'">{{ !item.isUrgency ? '正常' : '紧急' }}</a-tag>
							<p>{{ item.date }}</p>
						</div>
					</front-common>
					<front-application />
					<front-common class="front_announcement" title="通知公告">
						<template #button>
							<a-button type="text" @click="handleMoreAnnoucement">更多</a-button>
						</template>
						<div class="item" v-for="(item, index) in cardDatas" :key="index">
							<a href="#">{{ item.title }}</a>
							<span>{{ item.date }}</span>
						</div>
					</front-common>
				</a-col>
			</a-row>
		</div>
		<schedule-dialog v-model="scheduleModule" :data-id="dataId"></schedule-dialog>
	</div>
</template>

<script setup lang="ts">
import userInfo from './userInfo.vue';
import frontCommon from './common.vue';
import frontSchedule from './schedule.vue';
import frontApplication from './application.vue';
import scheduleDialog from './scheduleDialog.vue';
const searchValue = ref('');
const images = reactive([
	'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',
	'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',
	'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp'
]);
const dataId = ref('');
const scheduleModule = ref(false);
const scheduleDates = computed(() => {});
const cardDatas = computed(() => {
	return Array.from({ length: 6 }, (_, i) => ({
		id: i + 1,
		title: '第二届地震沉积学第二届地震沉积学学术学术研讨会（一号会议通知）',
		depart: '后勤保障部',
		date: '2022-12-01'
	}));
});
const backlogDatas = computed(() => {
	return Array.from({ length: 6 }, (_, i) => ({
		id: i + 1,
		title: '学生请假审批',
		depart: '后勤保障部',
		date: '2022-12-01',
		isUrgency: i % 2 === 0
	}));
});
const handleSearch = () => {
	console.log(searchValue.value);
};
//新增日程
const handleAddedSchedule = () => {
	dataId.value = '';
	scheduleModule.value = true;
};
//更新日程
const handleUpdateSchedule = (data: any) => {
	dataId.value = data.id;
	scheduleModule.value = true;
};
//更多待办
const handleMoreAgenda = () => {
	console.log('123123');
};
//更多通知公告
const handleMoreAnnoucement = () => {
	console.log('123123');
};
</script>

<style lang="scss" scoped>
.front_index_container {
	padding-bottom: 40px;
}
.front_banner_wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 400px;
	max-height: 500px;
	margin-bottom: 100px;
	box-sizing: border-box;
	background: url('@/assets/images/bg_banner.png') no-repeat center;
	background-size: cover;
	position: relative;
	.arco-input-group {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		width: 100%;
		height: calc(100% - 100px);
	}
	.arco-input-wrapper {
		width: 640px;
		height: 48px;
		background-color: #fff;
		:deep(.arco-input) {
			font-size: 16px;
		}
	}
	&::before {
		padding-top: 23.16%;
		content: '';
	}
	:deep(.arco-btn) {
		height: 48px;
		font-size: 16px;
	}
	.wrapper {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 50%);
		.arco-row {
			align-items: unset;
		}
	}
	.arco-carousel {
		height: 200px;
	}
}
.front_column_container {
	padding-top: 1px;
}
.front_announcement {
	:deep(.content) {
		padding: 10px 16px;
		background-color: #fff;
	}
	.item {
		display: flex;
		align-items: center;
		padding: 10px 0;
		a {
			flex: 1;
			font-size: 16px;
			font-weight: 500;
			color: #000;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			&:hover {
				color: rgb(var(--primary-5));
				text-decoration: underline;
			}
		}
		span {
			color: #999;
			font-size: 14px;
			margin-left: 10px;
		}
	}
}
.front_schedule {
	:deep(.content) {
		background-color: #fff;
	}
}
.front_backlog_wrapper {
	:deep(.content) {
		padding: 10px 16px;
		background-color: #fff;
	}
	.item {
		display: flex;
		align-items: center;
		padding: 10px 0;
		.arco-icon {
			margin-right: 10px;
		}
		a {
			flex: 1;
			font-size: 16px;
			font-weight: 500;
			color: #000;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			&:hover {
				color: rgb(var(--primary-5));
				text-decoration: underline;
			}
		}
		p {
			color: #999;
			font-size: 14px;
			margin-left: 10px;
		}
	}
}
</style>
